// 这个变量是每页显示的条数
let amount = parseInt($("#amount").val());
// 这是点击的页码，默认就是1
let dianji = 1;

    // 这是每页显示条数的更改后的方法
    $("#amount").change(()=>{
        amount = parseInt($("#amount").val());
        // 执行渲染表格的函数
        Render({
            page:dianji,
            num:amount,
            data:mydata
        });
        // 执行渲染页码的函数
        Page({
            page:dianji,
            num:amount,
            data:mydata
        });
        mydian();

    })
   
   // 渲染表格的方法
    function Render(arr){
        let data = arr.data;
        let num = arr.num;
        let page = arr.page;
        let shu =(page-1)*num;
        data = data.slice(shu,shu+num);
        $("#mytbody").html("");
        for (let i = 0; i < data.length; i++) {
            $("#mytbody").append(`
                <tr>
                    <td>${data[i].p_item}</td>
                    <td>${data[i].p_num}</td>
                    <td>${data[i].p_pro}</td>
                    <td>${data[i].p_weight}</td>
                    <td>${data[i].p_time.substring(0,10)}</td>
                    <td>
                        <a href="" class = "xiugai1" data-toggle="modal" data-target="#exampleModal">修改</a>
                        <a href="javascript:;" class = "shanchu1">删除</a>
                    </td>
                </tr>
            `);
        }
        page2();
        shanchu()
    }

    // 渲染页码的方法
    function Page(arr){
        let data = arr.data;
        let num = arr.num;
        let page = arr.page;
        // 渲染页码
        $("#page").html("");
        $("#page").append(`  
            <div>
                <p class="iconfont">&#xe630</p>
            </div>
        `)

        for (let i = 1; i <= Math.ceil(data.length/num); i++) {
            $("#page").append(`
                <div>${i}</div>
            `);
        }

        $("#page").append(`  
            <div>
                <p class="iconfont">&#xe631</p>
            </div>
        `)

        // 选中的页码添加类名
        for (let i = 1; i <= $("#page>div").length; i++) {
            if(i==page){
                $("#page>div")[i].classList.add("dang");
            }
        }

        page2();
        shanchu()
    }

    // 翻页的
    function page2(){
        $("#page>div").on("click",function(){
            // 定义一个变量，值是导航的长度-1
            let k = $("#page>div").length-1;
            console.log("1");
            // 循环节点集合
            for (let i = 0; i < $("#page>div").length; i++) {
                // 如果获取出来的值是正常数字，那就说明不是上下页，否则就是上下页
                if (i==this.innerText) {
                    // 将当前页赋值给dianji,后面传入当前页码渲染表格
                    dianji = parseInt(this.innerText);
                }else{
                    // 如果是上页并且变量大于1，那就将当前减一，然后跳出循环
                    if (this==$("#page>div")[0] && dianji>1) {
                        dianji--;
                        break;
                        // 如果是最后一个框，并且页码不是最后一个框，那就将当前+1，跳出循环
                    }else if (this==$("#page>div")[k] && dianji<k-1) {
                        dianji++;
                        break;
                    }
                }
            }
            // 执行渲染表格的函数
            Render({
                page:dianji,
                num:amount,
                data:mydata
            });
            // 执行渲染页码的函数
            Page({
                page:dianji,
                num:amount,
                data:mydata
            });
            mydian();

        })
    }

    // 输入多少页，进入多少页。
    $("#jump").change(()=>{
        if (parseInt($("#jump").val())<=$("#page>div").length-2 && parseInt($("#jump").val())>0) {
            dianji = parseInt($("#jump").val())
            // 执行渲染表格的函数
            Render({
                page:dianji,
                num:amount,
                data:mydata
            });
            // 执行渲染页码的函数
            Page({
                page:dianji,
                num:amount,
                data:mydata
            });  
            mydian();
  
        }
    })

    // 点击重置按钮，重置列表
    $("#chongzhi").on("click",()=>{
        // 执行渲染表格的函数
        Render({
            page:dianji,
            num:amount,
            data:mydata
        });
        // 执行渲染页码的函数
        Page({
            page:dianji,
            num:amount,
            data:mydata
        });   
        mydian();
 
    })


    // 模态框

    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 按钮，该按钮触发模式
        var recipient = button.data('whatever') // 从数据中提取data-*属性
        // 如有必要，您可以在这里启动AJAX请求（然后在回调中进行更新）。
        // 更新模态的内容。这里我们将使用jQuery，但您可以使用数据绑定库或其他方法。
        var modal = $(this)
        modal.find('.modal-title').text('增加采购记录')
        modal.find('.modal-body input').val(recipient)
      })







    //   这个数组用来装增加的信息
    let zeng = [];
    let shangbian = []; 
    function myajax (data){
        $.ajax({
            url:'/pick_fruit_increase',
            method:'post',
            data:{
                p_item   : data[0],
                p_num    : data[1],
                p_pro    : data[2],
                p_weight : data[3],
                p_time   : data[4]
            },
            success:(res)=>{
                alert(res);
            }
        })
    }

    $("#xinzeng").on("click",()=>{
        console.log("新增");
        let queding = document.getElementById("queding");
        queding.onclick = function(){
            let myinput = $("#myform input");
            for (let i = 0; i < myinput.length; i++) {
                zeng.push(myinput[i].value);
            }
            myajax(zeng);
            console.log("xinzeng");
        }
    })


    $("#queding").css({
    "width": "92%",
    "height": "36px",
    "width": "60px",
    "font-size": "14px",
    "border": "none",
    "background-color": "#4DC3B6",
    "color": "white",
    "border-radius": "4px",
    "outline":"none"
    })


    // 修改
    function mydian(){
        let myxiugai = [,,,,];
        $(".xiugai1").on("click",function(){
            let fu = this.parentElement.parentElement;
            let zi = $(fu).children();
            for (let i = 0; i < zi.length-1; i++) {
                // myxiugai.push(zi[i].innerText);
                myxiugai[i] = zi[i].innerText;
            }

            // 获取那个input框的集合
            let myinput = $("#myform input");
            // // 给所有input节点设置value值
            for (let k = 0; k < myinput.length; k++) {
                myinput[k].value = myxiugai[k];
                myinput[k].placeholder = myxiugai[k];
            }
            
            myinput[0].disabled = "disabled";
            myinput[1].disabled = "disabled";
            $("#queding,#quxiao").on("click",function(){
                $(myinput[0]).removeAttr("disabled");
                $(myinput[1]).removeAttr("disabled");
                for (let i = 0; i < myinput.length; i++) {
                    $(myinput[i]).removeAttr("placeholder");
                    if (myinput[i].value) {
                        myxiugai[i] = myinput[i].value;
                    }
                }
            })
            // 给确定按钮添加一个点击事件用来传输ajax
            let queding = document.getElementById("queding");
            queding.onclick = function(){
                myajax2(myxiugai);
            }
        })
    }

    // 修改的ajax方法
    function myajax2(data){
        $.ajax({
            url:'/pick_fruit_change',
            method:'post',
            data:{
                p_item   : data[0],
                p_num    : data[1],
                p_pro    : data[2],
                p_weight : data[3],
                p_time   : data[4]
            },
            success:(res)=>{
                if (res) {
                    alert("成功")
                    Render({
                        page:dianji,
                        num:amount,
                        data:mydata
                    });
                    // 执行渲染页码的函数
                    Page({
                        page:dianji,
                        num:amount,
                        data:mydata
                    });
                    mydian();
                }else{
                    alert("失败");
                }
            }
        })
    }
    

    // 删除
    function shanchu(){
        $(".shanchu1").on("click",function(){
            // 点击删除之后，页面无法移动
            let mybody = document.getElementsByTagName("body");
            mybody[0].style.overflow = "hidden";
            let myzhe = document.getElementById("zhe");
            myzhe.style.display = "block";
            let fu = this.parentElement.parentElement;
            // zi是需要删除的编号
            let zi = $(fu).children().eq(0).text()
            $("#quxiao2,#que2").on("click",function(){
                mybody[0].style.overflow = "visible";
                myzhe.style.display = "none";
            })
            $("#que2").on("click",function(){
                $.ajax({
                    url:'/pick_fruit_del',
                    method:'post',
                    data:{
                        p_item   : zi
                    },
                    success:(res)=>{
                        if (res) {
                            alert("删除成功")
                            Render({
                                page:dianji,
                                num:amount,
                                data:mydata
                            });
                            // 执行渲染页码的函数
                            Page({
                                page:dianji,
                                num:amount,
                                data:mydata
                            });
                            mydian();
                        }else{
                            alert("删除失败");
                        }
                    }
                })
            })
        })
    }
